<template>
  <div class="operation">
    <div class="operation-search">
      <a-form layout="inline">
        <a-form-item label="制单日期：">
          <a-range-picker
            format="YYYY-MM-DD"
            :default-value="defaulttimeList"
            @change="onTime"
            v-model="defaulttimeList"
          >
            <template slot="dateRender" slot-scope="current">
              <div class="ant-calendar-date" :style="getcurrentStyle(current)">
                {{ current.date() }}
              </div>
            </template>
          </a-range-picker>
        </a-form-item>
        <a-form-item label="下发时间：">
          <a-range-picker
            format="YYYY-MM-DD"
            @change="xFonTime"
            v-model="xFStartTimeList"
          >
            <template slot="dateRender" slot-scope="current">
              <div class="ant-calendar-date" :style="getcurrentStyle(current)">
                {{ current.date() }}
              </div>
            </template>
          </a-range-picker>
        </a-form-item>
        <a-form-item label="厂区：">
          <a-select
            :allowClear="true"
            mode="multiple"
            :maxTagCount="1"
            class="selectwidth"
            v-model="searchItem.WSType"
            placeholder="请选择"
            @change="handleChange"
          >
            <a-select-option
              v-for="item in WSTypeList"
              :key="item.type"
              :value="item.type"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="车间：">
          <a-select
            :allowClear="true"
            class="selectwidth"
            v-model="searchItem.SegmentID"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in QSegmentList"
              :key="item.type"
              :value="item.type"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="单据状态：">
          <a-select
            :allowClear="true"
            mode="multiple"
            :maxTagCount="1"
            class="selectwidth"
            v-model="searchItem.State"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in DicStatus"
              :key="item.type"
              :value="item.type"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="任务单号：">
          <a-input
            :allowClear="true"
            placeholder="请输入"
            v-model="searchItem.PackingPlanNo"
          />
        </a-form-item>
        <a-form-item label="产品编码：">
          <a-input
            :allowClear="true"
            placeholder="请输入"
            v-model="searchItem.MaterialCode"
          />
        </a-form-item>
        <a-form-item>
          <a-button
            class="default-button button-right-16"
            @click="GetPackingPlansListFun"
          >
            查询
          </a-button>
          <a-button class="default-button" @click="CleansearchItem">
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="table-box">
      <fieldset class="fieldset">
        <legend class="legend">
          <div style="font-size: 1rem">
            <a-icon type="snippets" theme="twoTone" /><span>任务单列表</span>
          </div>
        </legend>
        <div class="operation-table" id="table1">
          <div class="operation-table-box">
            <a-table
              :rowClassName="rowPPListClassName"
              :customRow="rowPPListClick"
              :columns="workunitcolumns"
              :row-key="(record) => record.PackingPlanID"
              :data-source="PPList"
              :loading="loading"
              :scroll="{ x: 4800, y: table1 }"
              :pagination="false"
              size="small"
            >
              <template slot="State" slot-scope="text, record">
                <span>{{ handPackingSatus(record.State) }}</span>
              </template>
              <template slot="WSType" slot-scope="text, record">
                <span>{{ wSTypetext(record.WSType) }}</span>
              </template>
              <template slot="action" slot-scope="text, record">
                <div style="display: flex; justify-content: space-around">
                  <a-icon
                    type="search"
                    class="icon-class"
                    @click="PPDetailShowFun(record)"
                  />
                </div>
              </template>
            </a-table>
          </div>
          <div class="table-paging">
            <a-pagination
              show-size-changer
              :default-current="1"
              :pageSizeOptions="pageSizeOptions"
              :total="procedureTotal"
              :pageSize="searchItem.pageRequestModel.pageSize"
              @change="procedureChange"
              @showSizeChange="onShowSizeChange"
            />
          </div>
        </div>
      </fieldset>
    </div>
    <div class="table-boxbelow">
      <fieldset class="fieldset">
        <legend class="legend">
          <div style="font-size: 1rem">
            <a-icon type="snippets" theme="twoTone" /><span>生产记录</span>
          </div>
        </legend>
        <div class="operation-table">
          <div class="operation-table-box" id="table2">
            <a-table
              :rowClassName="rowPPRDataClassName"
              :customRow="rowPPRDataClick"
              :columns="columns"
              :row-key="(record) => record.PackPlanRecordID"
              :data-source="PPRData"
              :loading="loading1"
              :scroll="{ x: 2000, y: table2 }"
              :pagination="false"
              size="small"
            >
              <template slot="RecordStatus" slot-scope="text, record">
                <span v-if="record.RecordStatus == 1">开始</span>
                <span v-else-if="record.RecordStatus == 2">挂起</span>
                <span v-else-if="record.RecordStatus == 3">结束</span>
              </template>
              <template slot="action" slot-scope="text, record">
                <div style="display: flex; justify-content: space-around">
                  <a-icon
                    type="delete"
                    class="icon-class"
                    @click="delPackingPlanRecordFun(record)"
                  />
                </div>
              </template>
            </a-table>
          </div>
        </div>
      </fieldset>
    </div>
    <PaRecipeDetail
      :show.sync="PPDetailShow"
      :procedureData="selectedPPList.PPDList"
    ></PaRecipeDetail>
  </div>
</template>

<script>
import {
  GetWebPackingPagePlans,
  GetPackingPlanDetails,
  GetPackingPlanRecordList,
} from "@/api/PackingPlanMange/index";
import { delPackingPlanRecord } from "@/api/PackingPlanRecord/index"; //删除生产记录
import { GetWorkShopTypesAll } from "@/api/WorkShopType/index";
import { GetSegments } from "@/api/NBCSegment/index";
import { debounce } from "@/common/debounce";
import PaRecipeDetail from "./children/PaRecipeDetail.vue";
import { getTableScroll } from "@/common/table-calc";
//灌装单列表
const workunitcolumns = [
  {
    title: "序号",
    dataIndex: "num",
    align: "center",
    fixed: "left",
  },
  {
    title: "任务单号",
    dataIndex: "PackingPlanNo",
    sorter: (a, b) => a.PackingPlanNo.localeCompare(b.PackingPlanNo),
    align: "center",
    width: 150,
    fixed: "left",
  },
  {
    title: "产品编码",
    dataIndex: "MaterialCode",
    align: "center",
    width: 120,
    fixed: "left",
  },
  {
    title: "产品名称",
    dataIndex: "MaterialName",
    align: "center",
    ellipsis: true,
    width: 230,
  },
  {
    title: "单据类型",
    dataIndex: "OrderTypeDes",
    align: "center",
    ellipsis: true,
    width: 120,
  },
  {
    title: "计划数量",
    dataIndex: "PlannedQuantity",
    align: "center",
  },
  {
    title: "实际数量",
    dataIndex: "ActQuantity",
    align: "center",
  },
  {
    title: "取样数量",
    dataIndex: "SampleQty",
    align: "center",
  },
  {
    title: "不良数量",
    dataIndex: "BadQty",
    align: "center",
  },
  {
    title: "批次号",
    dataIndex: "BatchNo",
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "State",
    align: "center",
    scopedSlots: { customRender: "State" }, //开启插槽
    sorter: (a, b) => Number(a.State) - Number(b.State),
  },
  {
    title: "厂区",
    dataIndex: "WSType",
    align: "center",
    scopedSlots: { customRender: "WSType" }, //开启插槽
  },
  {
    title: "车间",
    dataIndex: "SegmentName",
    align: "center",
  },
  {
    title: "计划开工时间",
    dataIndex: "PlanStartDt",
    align: "center",
    sorter: (a, b) => {
      const aTime = new Date(a.PlanStartDt).getTime(); // 需要先转换成时间戳
      const bTime = new Date(b.PlanStartDt).getTime();
      return aTime - bTime;
    },
  },
  {
    title: "计划完工时间",
    dataIndex: "PlanEndDt",
    align: "center",
    sorter: (a, b) => {
      const aTime = new Date(a.PlanEndDt).getTime(); // 需要先转换成时间戳
      const bTime = new Date(b.PlanEndDt).getTime();
      return aTime - bTime;
    },
  },
  {
    title: "生产日期",
    dataIndex: "ProductionDate",
    align: "center",
    sorter: (a, b) => {
      const aTime = new Date(a.ProductionDate).getTime(); // 需要先转换成时间戳
      const bTime = new Date(b.ProductionDate).getTime();
      return aTime - bTime;
    },
  },
  {
    title: "有效日期",
    dataIndex: "ExpiryDate",
    align: "center",
    sorter: (a, b) => {
      const aTime = new Date(a.ExpiryDate).getTime(); // 需要先转换成时间戳
      const bTime = new Date(b.ExpiryDate).getTime();
      return aTime - bTime;
    },
  },
  {
    title: "检验结果",
    dataIndex: "QMResult",
    align: "center",
  },
  {
    title: "备注",
    dataIndex: "Remark",
    align: "center",
  },
  {
    title: "下发人员",
    dataIndex: "AppointUser",
    align: "center",
  },
  {
    title: "下发时间",
    dataIndex: "AppointDt",
    align: "center",
    sorter: (a, b) => {
      const aTime = new Date(a.AppointDt).getTime(); // 需要先转换成时间戳
      const bTime = new Date(b.AppointDt).getTime();
      return aTime - bTime;
    },
  },
  {
    title: "创建人员",
    dataIndex: "CreateUser",
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "CreateDt",
    align: "center",
    sorter: (a, b) => {
      const aTime = new Date(a.CreateDt).getTime(); // 需要先转换成时间戳
      const bTime = new Date(b.CreateDt).getTime();
      return aTime - bTime;
    },
  },
  {
    title: "修改人员",
    dataIndex: "ModifyUser",
    align: "center",
  },
  {
    title: "修改时间",
    dataIndex: "ModifyDt",
    align: "center",
    sorter: (a, b) => {
      const aTime = new Date(a.ModifyDt).getTime(); // 需要先转换成时间戳
      const bTime = new Date(b.ModifyDt).getTime();
      return aTime - bTime;
    },
  },
  {
    title: "关闭人员",
    dataIndex: "CloseUser",
    align: "center",
  },
  {
    title: "关闭时间",
    dataIndex: "CloseDt",
    align: "center",
    sorter: (a, b) => {
      const aTime = new Date(a.CloseDt).getTime(); // 需要先转换成时间戳
      const bTime = new Date(b.CloseDt).getTime();
      return aTime - bTime;
    },
  },
  {
    title: "挂起操作人",
    dataIndex: "HangupUser",
    align: "center",
  },
  {
    title: "挂起时间",
    dataIndex: "HangupDt",
    align: "center",
    sorter: (a, b) => {
      const aTime = new Date(a.HangupDt).getTime(); // 需要先转换成时间戳
      const bTime = new Date(b.HangupDt).getTime();
      return aTime - bTime;
    },
  },
  {
    title: "强制结束人员",
    dataIndex: "ForcedEndUser",
    align: "center",
  },
  {
    title: "强制结束时间",
    dataIndex: "ForcedEndDt",
    align: "center",
    sorter: (a, b) => {
      const aTime = new Date(a.ForcedEndDt).getTime(); // 需要先转换成时间戳
      const bTime = new Date(b.ForcedEndDt).getTime();
      return aTime - bTime;
    },
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: 100,
    align: "center",
    fixed: "right",
    scopedSlots: { customRender: "action" },
  },
];
//生产记录列表
const columns = [
  {
    title: "序号",
    dataIndex: "num",
    align: "center",
    fixed: "left",
  },
  {
    title: "生产车间",
    dataIndex: "SegmentName",
    sorter: (a, b) => a.SegmentName.localeCompare(b.SegmentName),
    align: "center",
    width: 150,
    ellipsis: true,
    fixed: "left",
  },
  {
    title: "生产设备",
    dataIndex: "ProSegmentName",
    align: "center",
    width: 200,
    ellipsis: true,
    fixed: "left",
  },
  {
    title: "资产编号",
    dataIndex: "ProSegmentAssetNo",
    align: "center",
  },
  {
    title: "生产状态",
    dataIndex: "RecordStatus",
    align: "center",
    scopedSlots: { customRender: "RecordStatus" }, //开启插槽
  },
  {
    title: "实际产量",
    dataIndex: "ProduceQty",
    align: "center",
  },
  {
    title: "取样数量",
    dataIndex: "SampleQty",
    align: "center",
  },
  {
    title: "不良数量",
    dataIndex: "BadQty",
    align: "center",
  },
  {
    title: "生产批号",
    dataIndex: "BatchNo",
    align: "center",
  },
  {
    title: "开始人",
    dataIndex: "StartUserName",
    align: "center",
  },
  {
    title: "开始时间",
    dataIndex: "StartDt",
    align: "center",
  },
  {
    title: "结束人",
    dataIndex: "EndUserName",
    align: "center",
  },
  {
    title: "结束时间",
    dataIndex: "EndDt",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: 100,
    align: "center",
    fixed: "right",
    scopedSlots: { customRender: "action" },
  },
];
export default {
  name: "PackingPlanLMange",
  components: {
    PaRecipeDetail,
  },
  data() {
    return {
      table1: 0,
      table2: 0,
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        StartDt: null,
        EndDt: null,
        xFStartTime: null,
        xFEndTime: null,
        State: [],
        WSType: [],
        SegmentID: null,
        MaterialCode: null,
        PackingPlanNo: null,
      }, //搜索
      pageSizeOptions: ["30", "50", "100", "200", "500", "1000"],
      procedureTotal: 0,
      OrderDetailShow: false, //显示订单明细
      workunitcolumns,
      loading: false, //表格loading
      PPList: [],
      selectedPPList: {},
      PPDetailShow: false, //显示罐装单明细明细

      loading1: false, //表格loading
      columns,
      PPRData: [],
      selectedPPRData: {},
      defaulttimeList: [], //默认时间
      xFStartTimeList: [],
      DicStatus: [
        {
          type: 0,
          name: "初始",
        },
        {
          type: 2,
          name: "已下发",
        },
        {
          type: 3,
          name: "开始生产",
        },
        {
          type: 5,
          name: "结束生产",
        },
      ],
      WSTypeList: [],
      QSegmentList: [],
    };
  },
  methods: {
    //删除生产记录
    delPackingPlanRecordFun(item) {
      if (!this.hasPermission("46B91B4A-BECB-4CF9-A15D-0FCEB35C630A")) return;
      let _this = this;
      this.$confirm({
        title: "提示",
        content: `删除【${item.ProSegmentAssetNo}】记录`,
        async onOk() {
          let res = await delPackingPlanRecord(item);
          if (res.Data != null) {
            _this.$message.success("删除成功");
            _this.GetPPRDataFun();
          } else {
            _this.$message.error(res.Message);
          }
        },
        onCancel() {},
      });
    },
    //查询厂区
    wSTypetext(stastu) {
      let that = this;
      if (!stastu) return "";
      const result = that.WSTypeList.filter((o) => o.type === stastu);
      if (result.length > 0) {
        return result[0].name;
      }
      return "";
    },
    //制单日期选择
    onTime(e, e1) {
      let that = this;
      that.searchItem.StartDt = that.dateExt.showDate(e[0]._d);
      that.searchItem.EndDt = that.dateExt.showDate(e[1]._d);
    },
    //下发时间选择
    xFonTime(e, e1) {
      let that = this;
      that.searchItem.xFStartTime = that.dateExt.showDate(e[0]._d);
      that.searchItem.xFEndTime = that.dateExt.showDate(e[1]._d);
    },
    //时间选择器的样式填充
    getcurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },
    //选中厂区
    handleChange(value) {
      let that = this;
      if (value) {
        that.GetSegmentsAllFun(that.searchItem.WSType, true);
      }
    },
    //获取厂区列表
    async GetWorkShopTypesAllFun() {
      let that = this;
      let res = await GetWorkShopTypesAll(10);
      if (res.Status == 10000) {
        let wtList = [];
        res.Data.map((item) => {
          wtList.push({ type: item.WSType, name: item.WSName });
        });
        that.WSTypeList = wtList;
      } else {
        that.$message.error(res.Message);
      }
    },
    //获取车间列表
    GetSegmentsAllFun: debounce(async function (WSType) {
      let that = this;
      let SegSegmentID = [
        "1735FA0C-33E4-4B25-AAA2-DE084FB7D1E3",
        "5D494A1E-5F24-4036-9350-2E442A19FE87",
        "CCDB0114-7026-4218-A507-5C00E870B0B3",
        "12FF8C8D-B2DC-4554-AA9B-91703F4AB200",
      ];
      let res = await GetSegments({
        SegSegmentID: SegSegmentID,
        WSTypeList: WSType,
      });
      if (res.Status == 10000) {
        let wtList = [];
        res.Data.map((item) => {
          wtList.push({ type: item.SegmentID, name: item.SegmentName });
        });
        that.QSegmentList = wtList;
      } else {
        that.$message.error(res.Message);
      }
      that.spinning = false;
    }),
    checkRow(record) {
      this.selectedPPList = JSON.parse(JSON.stringify(record));
      this.GetPPRDataFun();
    },
    // 计划明细点击行时
    rowPPListClick(record, index) {
      return {
        on: {
          click: (e) => {
            this.checkRow(record);
          },
        },
        style: {
          "background-color":
            record.PackingPlanID === this.selectedPPList.PackingPlanID
              ? "#e6f7ff"
              : "",
        },
      };
    },
    // 生产记录点击行时
    rowPPRDataClick(record, index) {
      return {
        on: {
          click: (e) => {
            this.selectedPPRData = JSON.parse(JSON.stringify(record));
          },
        },
        style: {
          "background-color":
            record.PackPlanRecordID === this.selectedPPRData.PackPlanRecordID
              ? "#e6f7ff"
              : "",
        },
      };
    },
    //高亮行样式
    rowPPRDataClassName(record, index) {
      return this.selectedPPRData.PackPlanRecordID == record.PackPlanRecordID
        ? "checked-td-of-add-table"
        : " ";
    },
    rowPPListClassName(record, index) {
      return this.selectedPPList.PackingPlanID == record.PackingPlanID
        ? "checked-td-of-add-table"
        : " ";
    },
    //显示灌装单明细
    async PPDetailShowFun(row) {
      let that = this;
      if (row.PackingPlanID === undefined) return;
      row.PPDList = [];
      that.loading = true;
      let res = await GetPackingPlanDetails({
        PackingPlanID: row.PackingPlanID,
      });
      if (res.Status == 10000) {
        res.Data.map((item, index) => {
          item.NCreateDate = that.dateExt.showFullDate(item.NCreateDate);
        });
        row.PPDList = res.Data;
        that.selectedPPList.PPDList = row.PPDList;
        that.PPDetailShow = true;
      } else {
        that.$message.error(res.Message);
      }
      that.loading = false;
    },
    //获取单据详情列表
    GetPackingPlansListFun: debounce(async function () {
      let that = this;
      that.loading = true;
      let res = await GetWebPackingPagePlans(that.searchItem);
      if (res.Status == 10000) {
        res.Data.Data.map((item, index) => {
          item.num = index + 1;
          item.ProductionDate = that.dateExt.showDate(item.ProductionDate);
          item.ExpiryDate = that.dateExt.showDate(item.ExpiryDate);
          item.PlanStartDt = that.dateExt.showDate(item.PlanStartDt);
          item.PlanEndDt = that.dateExt.showDate(item.PlanEndDt);
          item.AppointDt = that.dateExt.showFullDate(item.AppointDt);
          item.CreateDt = that.dateExt.showFullDate(item.CreateDt);
          item.ModifyDt = that.dateExt.showFullDate(item.ModifyDt);
          item.CloseDt = that.dateExt.showFullDate(item.CloseDt);
          item.HangupDt = that.dateExt.showFullDate(item.HangupDt);
          item.ForcedEndDt = that.dateExt.showFullDate(item.ForcedEndDt);
        });
        that.PPList = res.Data.Data;
        if (that.PPList.length > 0) {
          that.checkRow(that.PPList[0]);
        }
        that.procedureTotal = res.Data.TotalNumber;
        that.loading = false;
      } else {
        that.$message.error(res.Message);
        that.loading = false;
      }
    }),
    //工单状态
    handPackingSatus(value) {
      let result = "";
      switch (value) {
        case -2:
          result = "关闭";
          break;
        case -1:
          result = "ERP反下达";
          break;
        case 0:
          result = "ERP下达";
          break;
        case 1:
          result = "待审核";
          break;
        case 2:
          result = "已下发";
          break;
        case 3:
          result = "生产中";
          break;
        case 4:
          result = "开始出料";
          break;
        case 5:
          result = "结束出料";
          break;
        case 6:
          result = "生产结束";
          break;
        case 7:
          result = "强制关闭";
          break;
        case 8:
          result = "关闭";
          break;
        case 9:
          result = "关闭";
          break;
        case 10:
          result = "ERP返下达锁定";
          break;
        case 11:
          result = "ERP锁定";
          break;
        case 12:
          result = "ERP关闭";
          break;
        case 13:
          result = "ERP删除";
          break;
        default:
          result = "";
          break;
      }
      return result;
    },
    //获取生产记录
    GetPPRDataFun: debounce(async function () {
      let that = this;
      that.loading1 = true;
      const data = {
        PackingPlanID: that.selectedPPList.PackingPlanID,
      };
      let res = await GetPackingPlanRecordList(data);
      if (res.Status == 10000) {
        res.Data.map((item, index) => {
          item.num = index + 1;
          item.StartDt = that.dateExt.showFullDate(item.StartDt);
          item.EndDt = that.dateExt.showFullDate(item.EndDt);
        });
        that.PPRData = res.Data;
      } else {
        that.$message.error(res.Message);
      }
      that.loading1 = false;
    }),
    //切换页数
    procedureChange(page, pageSize) {
      this.searchItem.pageRequestModel.pageIndex = page;
      this.searchItem.pageRequestModel.pageSize = pageSize;
      this.GetPackingPlansListFun();
    },
    //切换条数
    onShowSizeChange(current, size) {
      this.searchItem.pageRequestModel.pageIndex = current;
      this.searchItem.pageRequestModel.pageSize = size;
      this.GetPackingPlansListFun();
    },
    CleansearchItem() {
      let that = this;
      that.searchItem.StartDt = that.dateExt.getDay(-40);
      that.defaulttimeList[0] = that.searchItem.StartDt;
      that.searchItem.EndDt = that.dateExt.getDay(0);
      that.defaulttimeList[1] = that.searchItem.EndDt;
      that.xFStartTimeList = [];
      that.searchItem.xFStartTime = null;
      that.searchItem.xFEndTime = null;
      that.searchItem.WSType = [];
      that.searchItem.State = [];
      that.searchItem.SegmentID = null;
      that.searchItem.MaterialCode = null;
      that.searchItem.PackingPlanNo = null;
    },
  },
  created() {
    let that = this;
    that.searchItem.StartDt = that.dateExt.getDay(-40);
    that.defaulttimeList[0] = that.searchItem.StartDt;
    that.searchItem.EndDt = that.dateExt.getDay(0);
    that.defaulttimeList[1] = that.searchItem.EndDt;
    that.GetWorkShopTypesAllFun();
    that.GetPackingPlansListFun();
  },
  mounted() {},
  updated() {
    this.$nextTick(() => {
      this.table1 = getTableScroll(90, "table1");
      this.table2 = getTableScroll(40, "table2");
    });
  },
};
</script>

<style lang="less" scoped>
.operation {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem;
  flex: 1;
  overflow: hidden;
  .operation-search {
    display: flex;
    //justify-content: flex-end;
    border-bottom: 2px solid #f0f2f5;
    //margin-bottom: 0.9375rem;
    .selectwidth {
      width: 15rem;
    }
    .selectrightwidth {
      width: 7rem;
    }
  }
  .table-box {
    flex: 2;
    height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    // height: calc(100% - 65px- 50%);
    .operation-table {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: auto;

      .operation-table-box {
        flex: 2;
      }
    }
    .workunit-table {
      flex: 1;
      border: 1px solid #dddddd;
      border-radius: 0.625rem;
      padding: 0.9375rem;
      .workunit-title {
        margin-bottom: 0.625rem;
      }
    }
  }
  .table-boxbelow {
    flex: 1;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    // height: calc(100% - 65px- 50%);
    .operation-table {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: auto;
      .operation-table-box {
        flex: 2;
      }
    }
    .workunit-table {
      flex: 1;
      border: 1px solid #dddddd;
      border-radius: 0.625rem;
      padding: 0.9375rem;
      .workunit-title {
        margin-bottom: 0.625rem;
      }
    }
  }
}
.table-paging {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.fieldset {
  height: 100%;
  padding: 0.35em 0.625em 0.75em;
  margin: 0 2px;
  border: 1px solid silver;
  .legend {
    padding: 0.5em;
    border: 0;
    width: auto;
  }
}
.rowpad {
  padding: 0.25rem;
}
.procedure-modal {
  .title {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
  }
  .production-reporting {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .table-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
    .center {
      display: flex;
      flex-direction: column;
      margin: 0 1.25rem;
    }
    .search {
      margin: 0.625rem 0;
    }
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
}
/deep/ .ant-table-body {
  min-height: 6.25rem !important;
}
</style>
